<template>
  <div class="dialog">
    <el-dialog :title="rulesData.id?'编辑角色':'新增角色'" :visible="isDialogShow" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="rulesForm" :model="rulesData" :rules="rule" label-width="120px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="rulesData.name" style="width:80%" placeholder="1-10个字符" />
        </el-form-item>

        <el-form-item label="角色描述" prop="description">
          <el-input v-model="rulesData.description" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="8">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addCompanyRolesInfoAPI, editCompanyRolesInfoAPI } from '@/api/index'
export default {
	name: 'EditRules',
	props: {
		isDialogShow: { // 控制编辑弹出层的显示和隐藏
			type: Boolean,
			required: true
		},
		rulesData: { // 当前被点击的角色列表的数据
			type: Object,
			required: true
		}
	},
	data() {
		return {
			rule: {
				name: [{ required: true, message: '角色名称不能为空!', trigger: 'blur' }],
				description: [{ required: true, message: '角色描述不能为空!', trigger: 'blur' }]
			}
		}
	},
	methods: {
		// 点击确定按钮，表单验证通过，调用提交表单的接口，进行更新表单《《《《《——————————————————————————————————
		btnOk() {
			// 1、表单校验通过
			this.$refs.rulesForm.validate(async isOk => {
				if (this.rulesData.id) {
					// 如果有id，则是编辑功能，执行编辑
					// 1.1调用更新数据列表的接口，更新数据
					await editCompanyRolesInfoAPI(this.rulesData)

				} else {
					// 如果没有id，则是新增功能，执行新增
					// 1.2调用新增角色的接口，新增角色
					await addCompanyRolesInfoAPI(this.rulesData)
				}
				// 1.2子传父，通知父组件关闭弹出层
			this.$emit('update:isDialogShow', false)
				// 1.3子传父，通知子组件重新刷新列表
				this.$emit('updateForm')
			})
		},
		// 点击弹出层的关闭/取消按钮，关闭弹出层《《《《《——————————————————————————————————
		btnCancel() {
			// (1)关闭弹出层
			this.$emit('update:isDialogShow', false)
			// (2)清除校验数据:resetFields()  ——ElementUI自带的取消Form表单校验的方法
			this.$refs.rulesForm.resetFields()
		}
	}
}
</script>

<style scoped>
::v-deep .el-dialog__header{
	background-color: #409eff !important;
}
::v-deep .el-dialog__title{
	color:#fff !important
}
::v-deep .el-dialog__close{
		color:#fff !important
}
</style>